<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item  class="left by-input" label="客户名字">
        <el-input v-model="billInfo.customerName"></el-input>
      </el-form-item>
      <el-form-item  class="left by-input" label="联系电话">
        <el-input v-model="billInfo.customerPhone"></el-input>
      </el-form-item>
      <el-form-item  class="left by-input" label="发货时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="billInfo.deliverGoodsTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item  class="left by-input" label="货物查询">
        <el-select v-model="value9" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <div class="clear"></div>
      <div style="display: flex">
        <el-form-item  class="left by-input" label="货运部名字">
          <el-input v-model="billInfo.freight"></el-input>
        </el-form-item>
        <el-form-item  class="left by-input" label="货运部电话">
          <el-input v-model="billInfo.freightPhone"></el-input>
        </el-form-item>
        <el-form-item  class="left" label="货运部地址" style="flex: 1">
          <el-input v-model="billInfo.freightAddress"></el-input>
        </el-form-item>
      </div>

      <div style="display: flex">
        <el-form-item class="by-input" label="货物">
          <el-cascader placeholder="试试搜索：指南" :options="options" filterable change-on-select></el-cascader>
        </el-form-item>
        <el-form-item class="left by-input" label="运单类型">
          <el-select v-model="billInfo.orderType" filterable placeholder="请选择">
            <el-option v-for="item in $store.state.orderType" :key="item.value" :label="item.name" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="left by-input" label="押金">
          <el-input type="number" v-model="billInfo.deposit" placeholder="单位：元"></el-input>
        </el-form-item>
      </div>



      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="餐椅" name="chair">
          <div style="display: flex">
            <el-form-item class="left by-input" label="餐椅型号">
              <el-select v-model="billInfo.chairInfo.type" filterable placeholder="请选择" @change="chairSelect">
                <el-option v-for="(item,index) in $store.state.chairList" :key="index" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="餐椅名称">
              <el-select v-model="billInfo.chairInfo.name" filterable placeholder="请选择" @change="chairSelect1">
                <el-option v-for="(item,index) in $store.state.chairList" :key="index" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="餐椅颜色">
              <el-select v-model="billInfo.chairInfo.color" filterable placeholder="请选择">
                <el-option v-for="(item,index) in $store.state.colorList" :key="index" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="坐板类型">
              <el-select v-model="billInfo.chairInfo.board" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.boardList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item class="left by-input" label="餐椅数量">
              <el-input type="number" v-model="billInfo.chairInfo.number" placeholder=""></el-input>
            </el-form-item>
            <el-form-item class="left by-input" label="餐椅单位">
              <el-select v-model="billInfo.chairInfo.unit" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.unitList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="餐桌" name="table">
          <div style="display: flex">
            <el-form-item class="left by-input" label="桌架型号">
              <el-select v-model="billInfo.tableInfo.type" filterable placeholder="请选择" @change="tableSelect">
                <el-option v-for="item in $store.state.tableList" :key="item.value" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="桌架名称">
              <el-select v-model="billInfo.tableInfo.name" filterable placeholder="请选择" @change="tableSelect1">
                <el-option v-for="item in $store.state.tableList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="桌架颜色">
              <el-select v-model="billInfo.tableInfo.color" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="桌架尺寸">
              <el-select v-model="billInfo.tableInfo.size" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tableSizeList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item class="left by-input" label="桌架数量">
              <el-input type="number" v-model="billInfo.tableInfo.number" placeholder=""></el-input>
            </el-form-item>
            <!--<el-form-item class="left by-input" label="桌架单位">-->
              <!--<el-select v-model="billInfo.tableInfo.unit" filterable placeholder="请选择">-->
                <!--<el-option v-for="item in $store.state.unitList" :key="item.value" :label="item.name" :value="item"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <el-form-item class="left by-input" label="桌脚名称">
              <el-select v-model="billInfo.tableInfo.footerAppearance" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tableFooterAppearanceList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="桌脚材料">
              <el-select v-model="billInfo.tableInfo.footerMaterial" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tableFooterMaterialList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item class="left by-input" label="台面型号">
              <el-select v-model="billInfo.tableInfo.desktopType" filterable placeholder="请选择" @change="desktopSelect">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="台面名称">
              <el-select v-model="billInfo.tableInfo.desktopName" filterable placeholder="请选择" @change="desktopSelect1">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item class="left by-input" label="台面数量">-->
              <!--<el-input type="number" v-model="billInfo.tableInfo.desktopNumber" placeholder=""></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item class="left by-input" label="台面尺寸">-->
              <!--<el-select v-model="billInfo.tableInfo.desktopSize" filterable placeholder="请选择">-->
                <!--<el-option v-for="item in $store.state.tableSizeList" :key="item.value" :label="item.name" :value="item"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          </div>
        </el-tab-pane>
        <el-tab-pane label="茶几" name="teaTable">
          <div style="display: flex">
            <el-form-item class="left by-input" label="茶几型号">
              <el-select v-model="billInfo.teaTableInfo.type" filterable placeholder="请选择" @change="teaTableSelect">
                <el-option v-for="item in $store.state.teaTableList" :key="item.value" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="茶几名称">
              <el-select v-model="billInfo.teaTableInfo.name" filterable placeholder="请选择" @change="teaTableSelect">
                <el-option v-for="item in $store.state.teaTableList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="茶几颜色">
              <el-select v-model="billInfo.teaTableInfo.color" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="茶几尺寸">
              <el-select v-model="billInfo.teaTableInfo.size" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.teaTableSizeList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item class="left by-input" label="茶几数量">
              <el-input type="number" v-model="billInfo.teaTableInfo.number" placeholder=""></el-input>
            </el-form-item>
            <el-form-item class="left by-input" label="台面型号">
              <el-select v-model="billInfo.teaTableInfo.desktopType" filterable placeholder="请选择" @change="teaDesktopSelect">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="台面名字">
              <el-select v-model="billInfo.teaTableInfo.desktopName" filterable placeholder="请选择" @change="teaDesktopSelect1">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="电视柜" name="tvTable">
          <div style="display: flex">
            <el-form-item class="left by-input" label="电视柜型号">
              <el-select v-model="billInfo.tvTableInfo.type" filterable placeholder="请选择" @change="tvTableSelect">
                <el-option v-for="item in $store.state.tvTableList" :key="item.value" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="电视柜名称">
              <el-select v-model="billInfo.tvTableInfo.name" filterable placeholder="请选择" @change="tvTableSelect1">
                <el-option v-for="item in $store.state.tvTableList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="电视柜颜色">
              <el-select v-model="billInfo.tvTableInfo.color" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="电视柜尺寸">
              <el-select v-model="billInfo.tvTableInfo.size" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tvTableSizeList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item class="left by-input" label="电视柜数量">
              <el-input type="number" v-model="billInfo.tvTableInfo.number" placeholder=""></el-input>
            </el-form-item>
            <el-form-item class="left by-input" label="台面型号" >
              <el-select v-model="billInfo.tvTableInfo.desktopType" filterable placeholder="请选择" @change="tvDesktopSelect">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="left by-input" label="台面名称">
              <el-select v-model="billInfo.tvTableInfo.desktopName" filterable placeholder="请选择" @change="tvDesktopSelect1">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-tab-pane>
        <!--<el-tab-pane label="台面（大理石）" name="desktop">-->
          <!--<div style="display: flex">-->
            <!--<el-form-item class="left by-input" label="台面型号">-->
              <!--<el-select v-model="billInfo.desktopInfo.type" filterable placeholder="请选择" @change="desktopSelect">-->
                <!--<el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value" :value="item"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <!--<el-form-item class="left by-input" label="台面名称">-->
              <!--<el-select v-model="billInfo.desktopInfo.name" filterable placeholder="请选择" @change="desktopSelect1">-->
                <!--<el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.name" :value="item"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <!--<el-form-item class="left by-input" label="台面数量">-->
              <!--<el-input type="number" v-model="billInfo.desktopInfo.number" placeholder=""></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item class="left by-input" label="台面尺寸">-->
              <!--<el-select v-model="billInfo.desktopInfo.size" filterable placeholder="请选择">-->
                <!--<el-option v-for="item in $store.state.tableSizeList" :key="item.value" :label="item.name" :value="item"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</div>-->
        <!--</el-tab-pane>-->
        <el-tab-pane label="备注" name="other">
          <div style="display: flex">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="billInfo.otherInfo.remarks"></el-input>
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-row class="mb15">
        <el-col :span="6" :offset="18">
          <el-button type="primary" @click="addBillInfo">添加到订单</el-button>
        </el-col>
      </el-row>
          <table class="el-table el-table--border by-table" style="margin:15px 0">
            <tr>
              <th style="width: 100px">产品</th>
              <th>订单详细信息</th>
              <th>操作</th>
            </tr>
            <tr>
              <td>餐椅</td>
              <td>
                <!--<el-checkbox-group v-for="(o,index) in previewChair" :key="index+1" v-model="chairCheckList">-->
                  <!--<el-checkbox >{{index+1+', '}}-->
                    <!--<span>{{o.type+'('+o.name+','+ Tools.isUdf(o.color.name)+')'+' '}}</span>-->
                    <!--<span>{{o.number+Tools.isUdf(o.unit.name)+';  坐板：'+Tools.isUdf(o.board.name)}}</span>-->
                  <!--</el-checkbox>-->
                <!--</el-checkbox-group>-->
                <el-row v-for="(o,index) in previewChair" :key="index+1">
                  <el-col :span="1" class="by-center">
                    <el-checkbox></el-checkbox>
                  </el-col>
                  <el-col :span="3">{{index+1+'，'+'餐椅型号: '+o.type}}</el-col>
                  <el-col :span="5">( {{o.name+'，'+Tools.isUdf(o.color.name)}} )</el-col>
                  <el-col :span="2">{{'数量: '+o.number+Tools.isUdf(o.unit.name)}}</el-col>
                  <el-col :span="3">{{'坐板: '+Tools.isUdf(o.board.name)}}</el-col>
                  <el-col :span="11"></el-col>
                </el-row>

              </td>
              <td style='width:200px'>
                <el-button type="primary" size='small' icon="el-icon-edit"></el-button>
                <el-button type="primary" size='small' icon="el-icon-delete"></el-button>
              </td>
            </tr>
            <tr>
              <td>餐桌</td>
              <td>
                <el-row v-for="(o,index) in previewTable" :key='index+1'>
                  <el-col :span="1" class="by-center">
                    <el-checkbox style="position: relative;top: 3px"></el-checkbox>
                  </el-col>
                  <el-col :span="3">{{index+1+'，'+'桌架型号: '+o.type}}</el-col>
                  <el-col :span="5">( {{o.name+'，'+Tools.isUdf(o.color.name)+'，'+Tools.isUdf(o.size.name)}} )</el-col>
                  <el-col :span="2">{{'数量: '+o.number+'套'}}</el-col>
                  <el-col :span="5">{{'桌脚型号: '+Tools.isUdf(o.footerAppearance.name)+'，'+Tools.isUdf(o.footerMaterial.name)}}</el-col>
                  <el-col :span="5">{{'台面（大理石）:'+o.desktopType+'（'+o.desktopName+'）'}}</el-col>
                  <el-col :span="3"></el-col>
                </el-row>
              </td>
               <td style='width:200px'>
                <el-button type="primary" size='small' icon="el-icon-edit"></el-button>
                <el-button type="primary" size='small' icon="el-icon-delete"></el-button>
              </td>
            </tr>
            <tr>
              <td>茶几</td>
              <td>
                <el-row v-for="(o,index) in previewTeaTable" :key="index+1">
                  <el-col :span="1" class="by-center">
                    <el-checkbox></el-checkbox>
                  </el-col>
                  <el-col :span="3">{{index+1+'， '+'茶几型号: '+o.type}}</el-col>
                  <el-col :span="5">( {{o.name+'，'+Tools.isUdf(o.color.name)+'，'+Tools.isUdf(o.size.name)}} )</el-col>
                  <el-col :span="2">{{'数量: '+o.number+'个'}}</el-col>
                  <el-col :span="3">{{'茶几脚型号: '+o.desktopName}}</el-col>
                  <el-col :span="9"></el-col>
                </el-row>
              </td>
              <td style='width:200px'>
                <el-button type="primary" size='small' icon="el-icon-edit"></el-button>
                <el-button type="primary" size='small' icon="el-icon-delete"></el-button>
              </td>
            </tr>
            <tr>
              <td>电视柜</td>
              <td>
                <el-row v-for="(o,index) in previewTvTable" :key="index+1">
                  <el-col :span="1" class="by-center">
                    <el-checkbox></el-checkbox>
                  </el-col>
                  <el-col :span="3">{{index+1+'， '+'电视柜型号: '+o.type}}</el-col>
                  <el-col :span="5">( {{o.name+'，'+Tools.isUdf(o.color.name)+'，'+Tools.isUdf(o.size.name)}} )</el-col>
                  <el-col :span="2">{{'数量: '+o.number+'个'}}</el-col>
                  <el-col :span="3">{{'电视柜脚型号: '+o.desktopName}}</el-col>
                  <el-col :span="9"></el-col>
                </el-row>
              </td>
               <td style='width:200px'>
                <el-button type="primary" size='small' icon="el-icon-edit"></el-button>
                <el-button type="primary" size='small' icon="el-icon-delete"></el-button>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td>
                <el-row>
                  <el-col :span="12" >
                    <div v-for="(o,index) in previewOther" :key="index" class="text item">
                      <span class="by-span">{{index+1+'， '+o.remarks}}</span>
                    </div>
                  </el-col>
                  <el-col :span="12"></el-col>
                </el-row>
              </td>
               <td style='width:200px'>
                <el-button type="primary" size='small' icon="el-icon-edit"></el-button>
                <el-button type="primary" size='small' icon="el-icon-delete"></el-button>
              </td>
            </tr>
          </table>

      <el-row class="mb15">
        <el-col :span="6" :offset="18">
          <el-button type="primary" @click="geet" v-loading.fullscreen.lock="fullScreenLoading">创建订单</el-button>
          <el-button type="primary" @click="resetConfirm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script type="text/javascript">
  import { addBillInfo } from '@/api/create'
  export default {
    created: function () {
    },
    data () {
      return {
        activeName: 'chair',
        fullScreenLoading: false,
        chairCheckList: [1, 1, 1, 1],
        desktopCheckList: [],
        previewChair: [],
        previewTable: [],
        previewDesktop: [],
        previewTeaTable: [],
        previewTvTable: [],
        previewOther: [],
        chairList: this.$store.state.chairList,
        options4: [],
        value9: [],
        list: [],
        loading: false,
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas', 'California', 'Colorado',
          'Connecticut', 'Delaware', 'Florida',
          'Georgia', 'Hawaii', 'Idaho', 'Illinois',
          'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota',
          'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon', 'Pennsylvania',
          'Rhode Island', 'South Carolina',
          'South Dakota', 'Tennessee', 'Texas',
          'Utah', 'Vermont', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin',
          'Wyoming'],
        value: '',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        billInfo: {
          customerName: '',
          customerPhone: '',
          deliverGoodsTime: '',
          freight: '',
          freightPhone: '',
          freightAddress: '',
          orderType: '',
          deposit: '',
          chairInfo: {
            type: '',
            name: '',
            color: '',
            number: '',
            unit: '',
            board: ''
          },
          tableInfo: {
            type: '',
            name: '',
            number: '',
            size: '',
            color: '',
            footerAppearance: '',
            footerMaterial: '',
            desktopType: '',
            desktopName: ''
          },
          desktopInfo: {
            type: '',
            name: '',
            number: '',
            size: ''
          },
          teaTableInfo: {
            type: '',
            name: '',
            number: '',
            size: '',
            color: '',
            desktopType: '',
            desktopName: ''
          },
          tvTableInfo: {
            type: '',
            name: '',
            color: '',
            size: '',
            number: '',
            desktopType: '',
            desktopName: ''
          },
          otherInfo: {
            remarks: ''
          }
        },
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        option: [{
          value: '1',
          label: '套'
        }, {
          value: '选项2',
          label: '把'
        }, {
          value: '块',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
      }
    },
    mounted () {
      this.list = this.states.map(item => {
        return { value: item, label: item }
      })
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      },
      handleClick (row) {
        console.log(row)
      },
      remoteMethod (query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options4 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options4 = []
        }
      },
      tabClick (tab, event) {
        console.log(tab, event)
        console.log('event', event)
        console.log('tab', tab.name)
        console.log('active', this.activeName)
      },
      /**
       * 添加信息到预览表
       */
      addBillInfo () {
        let obj = {}
//        当前操作 产品信息 对象
        let t = this.billInfo[this.activeName + 'Info']
        obj = this.Tools.getNewObj(t)
        this['preview' + this.Tools.firstUpperCase(this.activeName)].push(obj)
        this.Tools.toNull(t)
      },
      chairSelect (str) {
        this.billInfo.chairInfo.type = str.value
        this.billInfo.chairInfo.name = str.name
      },
      chairSelect1 (str) {
        this.billInfo.chairInfo.type = str.value
        this.billInfo.chairInfo.name = str.name
      },
      tableSelect (str) {
        this.billInfo.tableInfo.type = str.value
        this.billInfo.tableInfo.name = str.name
      },
      tableSelect1 (str) {
        this.billInfo.tableInfo.type = str.value
        this.billInfo.tableInfo.name = str.name
      },
      desktopSelect (str) {
        this.billInfo.tableInfo.desktopType = str.value
        this.billInfo.tableInfo.desktopName = str.name
      },
      desktopSelect1 (str) {
        this.billInfo.tableInfo.desktopType = str.value
        this.billInfo.tableInfo.desktopName = str.name
      },
      teaTableSelect (str) {
        this.billInfo.teaTableInfo.type = str.value
        this.billInfo.teaTableInfo.name = str.name
      },
      teaTableSelect1 (str) {
        this.billInfo.teaTableInfo.type = str.value
        this.billInfo.teaTableInfo.name = str.name
      },
      teaDesktopSelect (str) {
        this.billInfo.teaTableInfo.desktopType = str.value
        this.billInfo.teaTableInfo.desktopName = str.name
      },
      teaDesktopSelect1 (str) {
        this.billInfo.teaTableInfo.desktopType = str.value
        this.billInfo.teaTableInfo.desktopName = str.name
      },
      tvTableSelect (str) {
        this.billInfo.tvTableInfo.type = str.value
        this.billInfo.tvTableInfo.name = str.name
      },
      tvTableSelect1 (str) {
        this.billInfo.tvTableInfo.type = str.value
        this.billInfo.tvTableInfo.name = str.name
      },
      tvDesktopSelect (str) {
        this.billInfo.tvTableInfo.desktopType = str.value
        this.billInfo.tvTableInfo.desktopName = str.name
      },
      tvDesktopSelect1 (str) {
        this.billInfo.tvTableInfo.desktopType = str.value
        this.billInfo.tvTableInfo.desktopName = str.name
      },
      geet () {
        let billInfoAll = {
          customerName: this.billInfo.customerName,
          customerPhone: this.billInfo.customerPhone,
          deliverGoodsTime: this.billInfo.deliverGoodsTime,
          freight: this.billInfo.freight,
          freightPhone: this.billInfo.freightPhone,
          freightAddress: this.billInfo.freightAddress,
          chairInfo: this.previewChair,
          tableInfo: this.previewTable,
          desktopInfo: this.previewDesktop,
          teaTableInfo: this.previewTeaTable,
          tvTableInfo: this.previewTvTable,
          otherInfo: this.previewOther
        }
        this.fullScreenLoading = true
        // 添加运单
        addBillInfo(billInfoAll).then(res => {
          // 这页面 采用加载情况
          let that = this
          this.fullScreenLoading = false
          console.log(res)
          if (res.success) {
            setTimeout(function () {
              that.$notify({
                title: '成功',
                message: res.message,
                type: 'success'
              })
            }, 100)
          } else {
            setTimeout(function () {
              that.$notify.error({
                title: '失败',
                message: res.message
              })
            }, 100)
          }
        })
      },
      // 重置运单信息
      resetOrder () {
        this.billInfo.customerName = ''
        this.billInfo.customerPhone = ''
        this.billInfo.deliverGoodsTime = ''
        this.billInfo.freight = ''
        this.billInfo.freightPhone = ''
        this.billInfo.freightAddress = ''
        this.previewChair = []
        this.previewTable = []
        this.previewDesktop = []
        this.previewTeaTable = []
        this.previewTvTable = []
        this.previewOther = []
      },
      //  重置订单信息
      resetConfirm () {
        this.$confirm('重置订单信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.resetOrder()
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          })
        })
      }
    }
  }
</script>

<style type="text/css" scoped>
  .el-row {
    margin-bottom:20px
  }
  .el-row:last-child{
    margin-bottom:0
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
